<template>
    <div>
      <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
        >
        <div class="top">
            <van-nav-bar
                title="影院"                
                @click-left="onClickLeft"
                @click-right="onClickRight"
            >
            <template #left>
              {{ $store.state.city }} <van-icon name="arrow-down" />
            </template>
                    <template #right>
                        <van-icon name="search" size="18" />
                    </template>
            </van-nav-bar>
        </div>
        <!-- 下拉框 -->
        <div class="ddd">
          <van-dropdown-menu>
            <van-dropdown-item v-model="value1" :options="option1" />
            <van-dropdown-item v-model="value2" :options="option2" />
          </van-dropdown-menu>
        </div>
        <ul>
        <li @click="gocinema(item.cinemaId)" v-for="item in list" :key="item.cinemaId" class="box">
          <div class="left">
            <div class="cinema_name">{{ item.name }}</div>
            <div class="cinema_text">{{ item.address }}</div>
          </div>
          <div class="right cinema_name">
            <div style="color: orangered">￥{{ item.lowPrice / 100 }}起</div>
            <div class="text">{{ item.Distance.toFixed(2) }} 公里 </div>
          </div>
        </li>
      </ul> 
    </van-list>
    </div>
  
  </template>
  
  <script>
    import { CinemaList } from '@/request/request'
    import Vue from 'vue';
    import { NavBar } from 'vant';
    import { Icon } from 'vant';
    import { DropdownMenu, DropdownItem } from 'vant';
    import { List } from 'vant';

    Vue.use(List);
    Vue.use(DropdownMenu);
    Vue.use(DropdownItem);
    Vue.use(Icon);
    Vue.use(NavBar);
  export default {
    data(){
      return{
        //定义一个空数组
        list:[],
        name:'',
        name1:'',
        loading: false,
        finished: false,
        pageNum: 1,
        value1: 0,
      value2: 'a',
      option1: [
        { text: '全部城市', value: 0 },
        { text: '新款城市', value: 1 },
      ],
      option2: [
        { text: '默认排序', value: 'a' },
        { text: '好评排序', value: 'b' },
      ],
      }
    },
    methods:{
      //上面传下来id跳转到影院详情页
      gocinema(id){
          this.$router.push({path:'/chinemaDetail',query:{id}})
      },
      //跳转到城市列表
      onClickLeft(){
        this.$router.push({
                path: '/city',
                query: {
                    url: this.$route.path
                }
            })
      },
      onClickRight(){
        this.$router.push('/')
      },
      onLoad() {
        this.name1 = this.$route.query.name
        // this.name1 = this.$store.state.city
        // console.log(this.name1);
        let id = this.$route.query.id
        // 异步更新数据
        CinemaList(id + '&pageNum=' + this.pageNum).then(res =>{
            // console.log(this.pageNum);
            this.list = this.list.concat(...res.data.cinemas)
            this.loading = false;
            this.pageNum++
            if(this.list.length >= res.data.total) {
                this.finish = true
            }
            // console.log(this.list);
        }) 
    },
    },
  }
  </script>
  
  <style lang="scss" scoped>
  .ddd{
    margin-top: 50px;
  }
.top{
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
}
ul{
    margin-bottom: 50px;
}
.box{
    border: .5px solid whitesmoke;
    padding: 15px 10px 15px 20px;
    display: flex;
    justify-content: space-between;
    .left{
        
        .cinema_name{
            line-height: 25px;
        }
        .cinema_text{
            color: rgb(113, 113, 113);
            line-height: 25px;
            font-size: 12px;
            width: 190px;
            white-space: nowrap;
            overflow: hidden;
            // /*文字超出用省略号*/
            text-overflow:ellipsis;
        }
    }
    .right{
        .text{
            text-align: center;
            font-size: 12px;
            line-height: 25px;
            color: rgb(116, 116, 116);
        }
    }
}
    
</style>
